﻿@page "/Option"

@using FluentUI.Demo.Shared.Pages.Option.Examples

<PageTitle>@App.PageTitle("Option")</PageTitle>

<h1>Option</h1>

<p>
    An implementation of an <a href="https://w3c.github.io/aria/#option" target="_blank" rel="noopener noreferrer">option</a>.
</p>
<p>
    The <code>&lt;FluentOption&gt;</code> component is meant to only be used within a components such as <code>&lt;FluentSelect&gt;</code>, 
    <code>&lt;FluentCombobox&gt;</code> or <code>&lt;FluentListbox&gt;</code>.
</p>
<p>
    <code>&lt;FluentOption&gt;</code> wraps the <code>&lt;fluent-option&gt;</code> element, a web component implementation of a listbox option leveraging the Fluent UI design system.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(OptionDefault)"></DemoSection>

<DemoSection Title="States" Component="@typeof(OptionStates)"></DemoSection>

<DemoSection Title="Icons" Component="@typeof(OptionIcons)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentOption<>)" GenericLabel="TOption"  />
